﻿
$(function() {
	$( "#catalog" ).accordion();
	$( "#catalog li" ).draggable({
		appendTo: "body",
		helper: "clone",
		cursor: "move",
		cursorAt: { top: 4, left: 4 }
	})
	$( "#properties_group" ).accordion();
	$( "#columnname_datadiv li" ).draggable({
		appendTo: "body",
		helper: "clone",
		cursor: "move",
		cursorAt: { top: 4, right: 4 }
	})


	$("#layoutui ol li").droppable({
		hoverClass: "ui-state-hover",
		accept: "#columnname_datadiv li",
		//greedy: true,
		drop: function( event, ui ){
			column_droppable($(this),event, ui);
		}
	});
	/*$("#layoutui ol li").droppable({
		hoverClass: "ui-state-hover",
		accept: "#catalog li",
		greedy: true,
		drop: function( event, ui ){
			change_ui_style($(this),event, ui);
		}
	});*/

	$("#layoutui ol li").resizable({
		grid: 1,
		resize:function(event, ui) {
			var style = $(this).attr("style");
			$("#contorller_div_style").textbox("setValue",style);
		}
	});
	$("#layoutui ol li").bind('click',function(){
		var column = $(this);
		var element = $(this).find("input");
		var label = $(this).find("label");
		columnClickEvent(column,element,label);
	});



	//设置窗口宽高
	$("#contorller_layoutdiv_style").textbox("setValue",$("#layoutui").attr("style"));

	$("#layoutui ol").droppable({
		//activeClass: "ui-state-default",
		//hoverClass: "ui-state-hover",
		accept: "#catalog li",
		drop: function( event, ui ) {
			//$(this).find( ".placeholder" ).remove();
			var which = ui.draggable.text();
			var column = $('<li class="ui-state-default" style="width:300px; height:30px;"></li>');
			var label = $('<label>'+which+'</label>');
			label.appendTo(column);

			var clearDiv = $('<div class="clear_div"></div>');

			//新加的控件加事件
			column.droppable({
				//activeClass: "ui-state-default",
				hoverClass: "ui-state-hover",
				accept: "#columnname_datadiv li",
				drop: function( event, ui ){
					column_droppable($(this),event, ui);
				}
			});

			/*column.droppable({
				hoverClass: "ui-state-hover",
				accept: "#catalog li",
				greedy: true,
				drop: function( event, ui ){
					change_ui_style($(this),event, ui);
				}
			});*/

			//li div resize
			column.resizable({
				grid: 1,
				resize:function(event, ui) {
					var style = $(this).attr("style");
					$("#contorller_div_style").textbox("setValue",style);
				}
			});

			if(which=='Textbox'){
				var element = $('<input class="easyui-textbox" />');
				element.appendTo(column);
				clearDiv.appendTo(column);
				column.appendTo( this );
				column.click(function(){columnClickEvent(column,element,label);});
			}
			if(which=='Select'){
				var element = $('<input class="easyui-combobox">');
				element.appendTo(column);
				clearDiv.appendTo(column);
				column.appendTo( this );
				column.click(function(){columnClickEvent(column,element,label);});
			}
			if(which=='Date'){
				var element = $('<input class="easyui-datebox" />');
				element.appendTo(column);
				clearDiv.appendTo(column);
				column.appendTo( this );
				column.click(function(){columnClickEvent(column,element,label);});
			}
			if(which=='Datetime'){
				var element = $('<input class="easyui-datetimebox" />');
				element.appendTo(column);
				clearDiv.appendTo(column);
				column.appendTo( this );
				column.click(function(){columnClickEvent(column,element,label);});
			}
			if(which=='Passwordbox'){
				var element = $('<input class="easyui-passwordbox" />');
				element.appendTo(column);
				clearDiv.appendTo(column);
				column.appendTo( this );
				column.click(function(){columnClickEvent(column,element,label);});
			}
			if(which=='Button'){
				var element = $('<input type="button" value="button"/>');
				element.appendTo(column);
				clearDiv.appendTo(column);
				column.appendTo( this );
				column.click(function(){columnClickEvent(column,element,label);});
			}


			//easyui控件动态渲染，否则不显示样式
			$.parser.parse(this);
		}
	});

	/*
	 $( "#layoutui ol li" ).bind('resizestop',
	 function(event, ui) {
	 $("#contorller_div_style").textbox("setValue","444");
	 });
	 */

	//布局区控件，当拖要添加的列时，动态变化
	function column_droppable(columnLayout,event, ui){

		var columnItem = ui.draggable;
		var column_name = columnItem.attr("column_name");
		var column_name_show = columnItem.attr("column_name_show");

		columnLayout.find("label").text(column_name_show);
		columnLayout.find("input").attr("uiname",column_name);

	}
	//修改UI控件样式
	function change_ui_style(columnLayout,event, ui){

		var uiItem = ui.draggable;
		var uiclass = uiItem.attr("uiclass");//easyui-textbox...
		//alert(uiclass);
		//columnLayout.find("label").text(uiItem.text());
		columnLayout.find("input").attr("class",uiclass);
		$.parser.parse(columnLayout);
	}


	$( "#layoutui ol" ).sortable({
		items: "li:not(.placeholder)",
		placeholder: "ui-state-highlight",
		connectWith: ".connectedSortable",
		sort: function() {
			// 获取由 droppable 与 sortable 交互而加入的条目
			// 使用 connectWithSortable 可以解决这个问题，但不允许您自定义 active/hoverClass 选项
			//$( this ).removeClass( "ui-state-default" );
		}
	});//.disableSelection();


	var element_current = null;
	var label_current = null;
	var column_current = null;


	//每个元素列的点击事件
	function columnClickEvent(column,element,label){
		$( "#layoutui ol li" ).removeClass("ui-state-highlight");
		column.addClass("ui-state-highlight");
		element_current = element;
		label_current = label;
		column_current = column;
		clearProperties();

		var data_options = element_current.attr("data-options");
		if(data_options!=null && data_options!=''){
			if(data_options.indexOf("{")>=0){
				data_options = data_options.substring(1,data_options.length-1);
			}
		}
		$("#contorller_dataoptions").textbox("setValue",data_options);
		$("#contorller_div_style").textbox("setValue",column_current.attr("style"));

		//显示columnName 和 columnNameShow
		var columnNameShow = label_current.text();
		var columnName = element_current.attr("uiname");
		var columnTip = column_current.attr("title");
		$("#contorller_columnNameShow").textbox("setValue",columnNameShow);
		$("#contorller_columnName").textbox("setValue",columnName);
		$("#contorller_columnTip").textbox("setValue",columnTip);

	}



	//应用效果：data-options apply button click
	$("#applyCSSBtn").bind("click",function(){
		if(column_current == null){return;}
		if(element_current == null){return;}
		if(label_current == null){return;}

		var data_options = $("#contorller_dataoptions").combobox('getValues');
		if(data_options != null && data_options!=''){
			data_options = ""+data_options;
			if(data_options.substring(0,1)==','){
				data_options = data_options.substring(1);
			}
			data_options = "{"+data_options+"}";
			var jsonParam = JSON.parse(data_options);
			element_current.attr("data-options",data_options);//备份，后面要传服务器
			//alert(data_options);
			//element_current.textbox(jsonParam);
			setDataoption2Element(element_current,jsonParam);
		}

		//名称变动 columnName
		var columnName = $("#contorller_columnName").textbox('getValue');
		if(columnName != null && columnName!=''){
			element_current.attr("uiname",columnName);
		}
		//名称变动 columnNameShow
		var columnNameShow = $("#contorller_columnNameShow").textbox('getValue');
		if(columnNameShow != null && columnNameShow!=''){
			label_current.text(columnNameShow);
		}
		//contorller_columnTip
		var columnTip = $("#contorller_columnTip").textbox('getValue');
		column_current.attr("title",columnTip);

		//div-style
		var contorllerDivStyle = $("#contorller_div_style").textbox('getValue');
		column_current.attr("style",contorllerDivStyle);

	});

	$("#deleteUI").bind("click",function(){
		if(column_current==null || column_current==""){
			return;
		}
		column_current.remove();
	});


	//窗口样式应用效果
	$("#applyLayoutCSSBtn").bind("click",function(){
		var div_style = $("#contorller_layoutdiv_style").textbox('getValue');
		if(div_style != null && div_style!=''){
			//var jsonParam = JSON.parse(div_style);
			$("#layoutui").attr("style",div_style);
		}


	});



	//清空所有属性
	function clearProperties(){
		$("#contorller_columnName").textbox("setValue","");
		$("#contorller_columnNameShow").textbox("setValue","");
		$("#contorller_columnTip").textbox("setValue","");
		$("#contorller_div_style").textbox("setValue","");
		$("#contorller_dataoptions").combobox("setValue","'':''");
	}

	function setDataoption2Element( element1, jsonParam){
		if(element1 == null){return;}
		var elementClass = element1.attr('class');
		if(elementClass.indexOf("easyui-validatebox") != -1){
			element1.validatebox(jsonParam);
		}
		else if(elementClass.indexOf("easyui-combobox") != -1){
			element1.combobox(jsonParam);
		}
		else if(elementClass.indexOf("easyui-textbox") != -1){
			element1.textbox(jsonParam);
		}
		else if(elementClass.indexOf("easyui-passwordbox") != -1){
			element1.passwordbox(jsonParam);
		}
		else if(elementClass.indexOf("easyui-datebox") != -1){
			element1.datebox(jsonParam);
		}
		else if(elementClass.indexOf("easyui-datetimebox") != -1){
			element1.datetimebox(jsonParam);
		}

	}

	//生成样式json
	function genDataOptions(){
		var jsonArr = [];
		$("#layoutui ol li").each(function(i){
			var label = $(this).find("label");
			var input = $(this).find("input");
			var columnTip = $(this).attr("title");
			//
			var jsonObj = {};
			jsonObj.columnNameShow = label.text();
			jsonObj.columnName = input.attr("uiname");
			jsonObj.columnTip = columnTip;
			var uiClass = input.attr("class");
			if(uiClass!=null && uiClass!=''){
				uiClass = uiClass.substring(0,uiClass.indexOf(" "));
				jsonObj.columnUIClass = uiClass;
			}
			jsonObj.dataOptions = input.attr("data-options");
			jsonObj.columnLayoutStyle = $(this).attr("style");
			jsonArr.push(jsonObj)
		});
		var jsonArrStr = JSON.stringify(jsonArr);
		//加上窗口style
		var jsonStyleObj = {
			uiStyle:jsonArrStr,
			layoutStyle:$("#contorller_layoutdiv_style").textbox("getValue"),
			isdialog4AddDialog:$("#isdialog_adddialog").textbox("getValue"),
			keyRandom:_keyRandom
		}
		var jsonStyleStr = JSON.stringify(jsonStyleObj);
		return jsonStyleStr;
	}

	//submit button
	$("#genSystemStyleBtn").bind("click",function(){
		var jsonStr = genDataOptions();
		$("#controller_final_style").textbox("setValue",jsonStr);
	});

	//submit button
	$("#submit").bind("click",function(){
		var jsonStyleStr = $("#controller_final_style").textbox("getValue");
		var jsonStyleObj = JSON.parse(jsonStyleStr);
		$.ajax({
			type:"POST",
			url:saveStyleUrl,
			dataType:"json",
			data:jsonStyleObj,
			success:function(msg){
				alert(msg);
			},
			error:function(er){
				alert(JSON.stringify(er));
			}
		});

	});


});